<template>
  <view>
    <!-- 单个房源 -->
    <view class="house__item">
      <!-- 顶部时间和状态 -->
      <view class="house__item__time_status" v-if="!isDefault">
        <view class="house__item__time_status__time"
          >更新时间：{{ dayjsUtils.format(item?.modifiedDatetime) }}
        </view>
        <view
          v-if="isRemoved"
          class="house__item__time_status__status"
          style="color: #2068f9"
          >{{ item?.status }}
        </view>
      </view>
      <!-- 中间具体详情内容 -->
      <view class="house__item__content" @click="handleToDetail(item)">
        <view class="house__item__img">
          <view class="house__item__img__emergency">{{ item?.emergency }}</view>
          <img-oss
            :src="handleStringImg(item?.pictureIds)"
            default-src="/static/images/index__png/base.jpg"
            width="200rpx"
            height="200rpx"
          ></img-oss>
        </view>
        <view class="house__item__info">
          <view class="house__item__info__title">
            <view class="pinned" v-if="item?.topUp === '是'">置顶</view>
            <text class="name">{{ item?.communityName }}</text>
          </view>
          <view class="house__item__info__location">
            <img src="@/static/images/index__png/location.png" />
            <view v-if="item?.building || item?.unit || item?.doorNO">
              {{ item?.building }}幢{{
                item?.unit != null ? item?.unit : ""
              }}单元{{ item?.doorNO != null ? item?.doorNO : "" }}号
            </view>
            <view v-else>
              {{ item?.address }}
            </view>
          </view>
          <view class="house__item__info__tags">
            <view class="tag">{{ item?.decoration }}</view>
          </view>
          <view class="house__item__info__time" v-if="!isRemoved"
            >{{ dayjsUtils.format(item.publishDate) }}
          </view>
          <view class="house__item__info__bottom">
            <text class="price">{{ item?.offerMoney || "" }}万元</text>
            <view class="action">
              <view
                v-if="item?.status === '已发布'"
                class="action_item"
                @click.stop="addCollection(item)"
              >
                <img-oss
                  v-if="isStared"
                  width="32rpx"
                  height="32rpx"
                  :default-src="'/static/images/index__png/stared.png'"
                ></img-oss>
                <img-oss
                  v-else
                  width="32rpx"
                  height="32rpx"
                  :default-src="
                    item.isFavorite
                      ? '/static/images/index__png/stared.png'
                      : '/static/images/index__png/star.png'
                  "
                ></img-oss>
                <text style="margin-left: 10rpx"
                  >{{ item?.collectAmount || 0 }}
                </text>
              </view>
              <view class="action_item">
                <img
                  class="action_item__icon"
                  src="@/static/images/index__png/eye.png"
                />
                <text>{{ item?.viewAmount || 0 }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 底部 操作栏 -->
      <view class="house__item__action" v-if="!isDefault">
        <template v-if="!isRemoved">
          <nut-button
            @click="handleRemove"
            v-if="item?.status === '已发布' || item?.status === '待审核'"
            style="
              width: 184rpx;
              height: 60rpx;
              border-radius: 8rpx;
              background: #ffffff;
              border: 2rpx solid #1fab62;
              color: #1fab62;
              margin-left: 20rpx;
              padding: 0;
            "
            type="default"
            :loading="loading"
            shape="square"
            >下架
          </nut-button>
          <nut-button
            v-if="item?.status === '已发布'"
            @click="handleToPromotionRrecords"
            style="
              width: 184rpx;
              height: 60rpx;
              border-radius: 8rpx;
              background: #ffffff;
              border: 2rpx solid #1fab62;
              color: #1fab62;
              margin-left: 20rpx;
              padding: 0;
            "
            type="default"
            shape="square"
            >推广记录
          </nut-button>
          <nut-button
            v-if="item?.status === '已发布'"
            @click="handleToPromotion(item)"
            style="
              width: 184rpx;
              height: 60rpx;
              border-radius: 8rpx;
              background: #1fab62;
              border: 2rpx solid #1fab62;
              color: #ffffff;
              margin-left: 20rpx;
              padding: 0;
            "
            type="success"
            shape="square"
            >一键推广
          </nut-button>
          <nut-button
            @click="handleDelete"
            :loading="loading"
            v-if="item?.status === '不通过' || item?.status === '待支付'"
            style="
              width: 184rpx;
              height: 60rpx;
              border-radius: 8rpx;
              background: #ffffff;
              border: 2rpx solid #1fab62;
              color: #1fab62;
              margin-left: 20rpx;
              padding: 0;
            "
            type="success"
            shape="square"
            >删除
          </nut-button>
          <nut-button
            @click="handleUpdate(item)"
            v-if="item?.status === '不通过' || item?.status === '待支付'"
            style="
              width: 184rpx;
              height: 60rpx;
              border-radius: 8rpx;
              background: #1fab62;
              border: 2rpx solid #1fab62;
              color: #ffffff;
              margin-left: 20rpx;
              padding: 0;
            "
            type="success"
            shape="square"
            >编辑
          </nut-button>
        </template>
        <template v-else>
          <nut-button
            @click="handleDelete"
            :loading="loading"
            v-if="item?.status === '用户下架' || item?.status === '平台下架'"
            style="
              width: 184rpx;
              height: 60rpx;
              border-radius: 8rpx;
              background: #ffffff;
              border: 2rpx solid #1fab62;
              color: #1fab62;
              margin-left: 20rpx;
              padding: 0;
            "
            type="success"
            shape="square"
            >删除
          </nut-button>
          <nut-button
            @click="handleRestocked(item)"
            :loading="reloading"
            v-if="item?.status === '用户下架'"
            style="
              width: 184rpx;
              height: 60rpx;
              border-radius: 8rpx;
              background: #1fab62;
              border: 2rpx solid #1fab62;
              color: #ffffff;
              margin-left: 20rpx;
              padding: 0;
            "
            type="success"
            shape="square"
            >重新上架
          </nut-button>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import dayjsUtils from "@/utils/dayjsUtils";
import HouserVipService from "@/api/HouserVipService";
import { ref, reactive } from "vue";
import Toast from "@/utils/Toast";
import HouseService from "@/api/HouseService";
import LoginService from "@/api/LoginService";

//加载状态
const loading = ref(false);
const reloading = ref(false);
const emits = defineEmits(["onStarClick", "onRefreshList"]);
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  isDefault: {
    type: Boolean,
    default: true,
  },
  isStared: {
    type: Boolean,
    default: false,
  },
  isRemoved: {
    type: Boolean,
    default: false,
  },
});
const handleStringImg = (data) => {
  if (!data?.length) {
    return "";
  }
  return data[0];
};
const house = reactive({
  houseId: "",
});
// 一键推广
const handleToPromotion = (data) => {
  uni.navigateTo({
    url: `/pages/oneclick_promotion/oneclick_promotion?id=${data.id}&houseIdIsTrue=true`,
  });
};
//下架
const handleRemove = async () => {
  try {
    loading.value = true;
    await HouseService.applyToRemove({ id: props.item.id });
    Toast.info("下架成功");
    emits("onRefreshList");
    loading.value = false;
  } catch (error) {
    Toast.info(error);
    loading.value = false;
  }
};
//重新上架
const handleRestocked = async (data) => {
  try {
    reloading.value = true;
    await HouseService.applyToRestocked({ id: props.item.id });
    Toast.info("重新上架成功");
    emits("onRefreshList");
    reloading.value = false;
    setTimeout(() => {
      uni.navigateTo({
        url: `/pages/pay/publish_pay?id=${data.id}`,
      });
    }, 1000);
  } catch (error) {
    Toast.info(error);
    reloading.value = false;
  }
};
//删除房源
const handleDelete = async () => {
  try {
    loading.value = true;
    await HouseService.applyToDelete({ id: props.item.id });
    Toast.info("删除成功");
    emits("onRefreshList");
    loading.value = false;
  } catch (error) {
    Toast.info(error);
    loading.value = false;
  }
};
//编辑房源
const handleUpdate = async (data) => {
  uni.navigateTo({
    url: `/pages/publish/publish?id=${data.id}`,
  });
};

// 用户收藏/取消收藏
const addCollection = async (data) => {
  await LoginService.hasToken();
  const id = data.id;
  try {
    if (props.isStared) {
      HouserVipService.removeCollect(id);
      Toast.info("取消收藏成功");
      emits("onStarClick", false, id);
      return;
    }
    if (data.isFavorite) {
      HouserVipService.removeCollect(id);
      Toast.info("取消收藏成功");
      emits("onStarClick", false, id);
    } else {
      HouserVipService.collect(id);
      Toast.info("收藏成功");
      emits("onStarClick", true, id);
    }
  } catch (err) {
    Toast.info(err);
  }
};
//去推广记录页面
const handleToPromotionRrecords = (data) => {
  uni.navigateTo({
    url: `/pages/my/promotion_record?id=${data.id}`,
  });
};

//点击跳转详情页
const handleToDetail = (data) => {
  props.isDefault
    ? uni.navigateTo({
        url: `/pages/home_detail/home_detail?id=${data.id}`,
      })
    : uni.navigateTo({
        url: `/pages/my/housing_resource_detail?id=${data.id}`,
      });
};
</script>
<style lang="scss" scoped>
.house__item {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;

  .house__item__time_status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rpx 22rpx 44rpx 0;

    .house__item__time_status__time {
      font-size: 28rpx;
      color: #181818;
      line-height: 33rpx;
    }

    .house__item__time_status__status {
      font-size: 28rpx;
      color: #f10d34;
      line-height: 33rpx;
    }
  }

  .house__item__content {
    display: flex;
    align-items: center;

    .house__item__img {
      flex-shrink: 0;
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      overflow: hidden;
      background-color: #f8fafd;
      margin-right: 20rpx;
      position: relative;

      .house__item__img__emergency {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        font-size: 20rpx;
        color: #ffffff;
        line-height: 28rpx;
        height: 36rpx;
        background: #dd432e;
        border-radius: 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 8rpx;
      }

      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .house__item__info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200rpx;
      flex: 1;

      .house__item__info__title {
        display: flex;
        align-items: center;

        .pinned {
          flex-shrink: 0;
          width: 56rpx;
          height: 32rpx;
          background: #1fab62;
          border-radius: 4rpx;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 32rpx;
          text-align: center;
          margin-right: 10rpx;
        }

        .name {
          font-weight: 600;
          font-size: 28rpx;
          color: #181818;
          line-height: 48rpx;
          @include line(1);
        }
      }

      .house__item__info__location {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #7b7b7b;
        line-height: 28rpx;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }
      }

      .house__item__info__tags {
        display: flex;
        align-items: center;

        .tag {
          padding: 0 10rpx;
          height: 34rpx;
          background: #f8fafd;
          border-radius: 4rpx;
          font-size: 20rpx;
          color: #1fab62;
          line-height: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10rpx;
        }
      }

      .house__item__info__time {
        font-weight: 400;
        font-size: 20rpx;
        color: #7b7b7b;
        line-height: 28rpx;
      }

      .house__item__info__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          font-weight: 500;
          font-size: 32rpx;
          color: #dd432e;
          line-height: 32rpx;
        }

        .action {
          display: flex;
          align-items: center;

          .action_item {
            font-size: 20rpx;
            color: #7b7b7b;
            line-height: 28rpx;
            display: flex;
            align-items: center;
            margin-left: 20rpx;

            .action_item__icon {
              width: 32rpx;
              height: 32rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }

  .house__item__action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 32rpx;
  }
}

.house__item--but {
  width: 184rpx;
  height: 60rpx;
}
</style>
